<template>
	<view>
		<view class="grace-idcard-main">
			<view class="grace-idcard-input">
				<u-field @click="showselect=true" v-model="nationality " :label="$t('mypage.authen.nationality')" :placeholder="$t('mypage.authen.Pleasenationality')" disabled>
				</u-field>
				<u-field type="number" v-model="operatorIdCard " :label="$t('mypage.authen.IDNumber')" :placeholder="$t('mypage.authen.PleaseNumber')">
				</u-field>
				<u-select v-model="showselect" :default-value="[0]" :list="nationalityList" @confirm="confirm"></u-select>
			</view>
			<view class="grace-idcard-text">
				{{$t('mypage.authen.Photofront')}}
			</view>
			<view class="grace-idcard-items">
				<view class="grace-idcard-uper-btn" @tap="selectImg1">
					<view class="img">
						<image src="../../../static/imgs/camera.png" mode="widthFix" />
					</view>
					<view class="text">{{$t('mypage.authen.Takephotos')}}</view>
				</view>
				<view class="grace-idcard-preview">
					<image :src="idCard1" @click="previewImg(1)" mode="widthFix"></image>
				</view>
			</view>
			<view class="grace-idcard-text">
				{{$t('mypage.authen.Photoback')}}
			</view>
			<view class="grace-idcard-items">
				<view class="grace-idcard-uper-btn" @tap="selectImg2">
					<view class="img">
						<image src="../../../static/imgs/camera.png" mode="widthFix" />
					</view>
					<view class="text">{{$t('mypage.authen.Takephotos')}}</view>
				</view>
				<view class="grace-idcard-preview">
					<image :src="idCard2" @click="previewImg(2)" mode="widthFix" />
				</view>
			</view>
			<view class="grace-idcard-text">
				{{$t('mypage.authen.Photocard')}}
			</view>
			<view class="grace-idcard-items">
				<view class="grace-idcard-uper-btn" @tap="selectImg3">
					<view class="img">
						<image src="../../../static/imgs/camera.png" mode="widthFix" />
					</view>
					<view class="text">{{$t('mypage.authen.Takephotos')}}</view>
				</view>
				<view class="grace-idcard-preview">
					<image :src="operatorIdcardPic" @click="previewImg(3)" mode="widthFix" />
				</view>
			</view>
			<view style="margin:38upx 0">
				<button type="primary" @tap="uploadCards">{{$t('mypage.authen.certification')}}</button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	var _self;
	export default {
		data() {
			return {
				showselect:false,//下拉框
				nationality: '', //国籍
				nationalityid: '', //国籍id
				operatorIdCard: '', //身份证
				idCard1: '../../../static/imgs/idcard1.png', //正面
				idCard2: '../../../static/imgs/idcard2.png', //反面
				operatorIdcardPic: '../../../static/imgs/idcard4.jpg', //手持
				nationalityList: [{
						value: '1',
						label: '中国'
					},
					{
						value: '2',
						label: '文莱'
					},
					{
						value: '3',
						label: '柬埔寨'
					},
					{
						value: '4',
						label: '印度尼西亚'
					},
					{
						value: '5',
						label: '老挝'
					},
					{
						value: '6',
						label: '马来西亚'
					},
					{
						value: '7',
						label: '缅甸'
					},
					{
						value: '8',
						label: '菲律宾'
					},
					{
						value: '9',
						label: '新加坡'
					},
					{
						value: '10',
						label: '泰国'
					},
					{
						value: '11',
						label: '越南'
					},
				]
			};
		},
		onLoad: function() {
			_self = this;
			this.$i18n.locale=='en'?uni.setNavigationBarTitle({
			    title: 'Application for certification'
			}):uni.setNavigationBarTitle({
			    title: '申请个人认证'
			});
		},
		methods: {
			confirm(e){
				let nat =e[0]
				this.nationality=nat.label
				this.nationalityid=nat.value
			}, 
			selectImg1: function() {
				uni.chooseImage({
					count: 1,
					success: function(res) {
						_self.idCard1 = res.tempFilePaths[0];
					}
				})
			},
			selectImg2: function() {
				uni.chooseImage({
					count: 1,
					success: function(res) {
						_self.idCard2 = res.tempFilePaths[0];
					}
				})
			},
			selectImg3: function() {
				uni.chooseImage({
					count: 1,
					success: function(res) {
						_self.operatorIdcardPic = res.tempFilePaths[0];
					}
				})
			},
			previewImg(ids) {
				var imgsrc=''
				ids==1?imgsrc=this.idCard1:ids==2?imgsrc=this.idCard2:imgsrc=this.operatorIdcardPic
				uni.previewImage({
					urls: [imgsrc]
				});
			},
			//上传照片
			async uploadCards() {
				if (this.idCard1 == '../../../static/imgs/idcard1.png' || this.idCard2 == '../../../static/imgs/idcard2.png'||this.operatorIdcardPic== '../../../static/imgs/idcard4.jpg') {
					uni.showToast({
						title: this.$i18n.messages[this.$i18n.locale].mypage.authen.Pleaseselect,
						icon: "none"
					});
					return;
				}
				uni.showLoading({
					title: this.$i18n.messages[this.$i18n.locale].mypage.authen.Uploading
				});
				const _this = this
				let data = {}
				data.nationality = this.nationalityid
				data.operatorIdCard = this.operatorIdCard
				let imgsrcList=[]
				let file = {}
				file.uri = this.idCard1;
				file.name = 'idCard1'
				imgsrcList.push(file)
				let file2 = {}
				file2.uri = this.idCard2;
				file2.name = 'idCard2'
				imgsrcList.push(file2)
				let file3 = {}
				file3.uri = this.operatorIdcardPic;
				file3.name = 'operatorIdcardPic'
				imgsrcList.push(file3)
				console.log(imgsrcList)
				const res = await this.$myUploadFile({
					url: '/dmh/apply-for-personal',
					header: {},
					formData: data,
					files: imgsrcList
				})
				if (res.code == 200) {
					_this.$refs.uToast.show({
						title: this.$i18n.messages[this.$i18n.locale].mypage.authen.Upsuccessful,
						type: 'success'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 1000)
				
				} else {
					_this.$refs.uToast.show({
						title: this.$i18n.messages[this.$i18n.locale].mypage.authen.Upfailed,
						type: 'error'
					})
				}
				setTimeout(function () {
				    uni.hideLoading();
				}, 500);
			}
		},
	}
</script>
<style>
	view {
		font-size: 28upx;
	}

	.grace-idcard-main {
		margin: 20upx 30upx;
		padding-bottom: 30rpx;
	}

	.grace-idcard-text {
		line-height: 2em;
		margin-top: 30upx;
	}

	.grace-idcard-items {
		background: #FFFFFF;
		padding: 30upx 0;
		display: flex;
		margin: 30upx 0;
		border-radius: 10upx;
		align-items: flex-start;
	}

	.grace-idcard-uper-btn {
		width: 276upx;
		margin: 0 60upx;
		background: #F1F1F1;
		padding-bottom: 10upx;
		border-radius: 10upx;
		text-align: center;
	}

	.grace-idcard-uper-btn .img {
		width: 100upx;
		height: 100upx;
		margin: 0 auto;
		margin-top: 30upx;
	}

	.grace-idcard-uper-btn .img image {
		width: 100upx;
		height: 100upx;
	}

	.grace-idcard-uper-btn .text {
		width: 100%;
		margin-top: 10upx;
		text-align: center;
		line-height: 2em;
	}

	.grace-idcard-preview {
		width: 50%;
		margin: 0 30upx;
	}

	.grace-idcard-preview image {
		width: 100%;
	}
</style>
